<script setup lang="ts">
import { ref } from "vue";

const foods = ref(["烤肉", "饺子", "面条", "火锅"]);

const obj = ref({
  name: "张三",
  age: 18,
  sex: "男",
});
</script>

<template>
  <div>
    <!-- 列表渲染 -->
    <p v-for="(item, index) in foods" :key="item">{{ index + 1 }}{{ item }}</p>

    <!-- 无序列表 -->
    <ul>
      <li v-for="(item, index) in foods" :key="item">
        {{ item }}
      </li>
    </ul>
    <!-- 有序列表 -->
    <ol>
      <li v-for="(item, index) in foods" :key="item">
        {{ item }}
      </li>
    </ol>

    <!-- 补充 -->
    <!-- 生成数组 -->
    <ol>
      <li v-for="item in 10">测试结构</li>
    </ol>

    <ul>
      <li v-for="(item,key,index) in obj">
        {{ item }},{{ key }},{{ index }}
      </li>
    </ul>
  </div>
</template>

<style scoped></style>
